<template>
  <BasicModal
    v-bind="$attrs"
    :title="t('routes.demo.documentManager.useAge.useAge')"
    @register="register"
    @ok="handleSubmit"
    :destroyOnClose="true"
    :minHeight="100"
    :width="1200"
  >
    <Tabs>
      <TabPane key="1" :tab="t('routes.demo.documentManager.useAge.partAssociation')">
        <BasicTable @register="registerTable" />
      </TabPane>
      <TabPane key="2" :tab="t('routes.demo.documentManager.useAge.documentAssociation')">
        <BasicTable @register="registerTable2" />
      </TabPane>
    </Tabs>
  </BasicModal>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import { Tabs, TabPane } from 'ant-design-vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { BasicTable, useTable } from '/@/components/Table';

  import { getPartAssColumns, getDocAssColumns } from './tableData';

  import { GetDocTypeUseList } from '/@/api/demo/document';
  import { useI18n } from '/@/hooks/web/useI18n';

  const { t } = useI18n();

  const partID = ref('');
  const partVersion = ref('');

  // 提交表单
  const handleSubmit = async () => {
    closeModal();
  };

  // 初始化弹窗
  const [register, { setModalProps, closeModal }] = useModalInner((data) => {
    setModalProps({ confirmLoading: false });
    partID.value = data.record.id;
    partVersion.value = data.record.version;
  });

  // 零件关联
  const [registerTable] = useTable({
    api: GetDocTypeUseList,
    beforeFetch: (params) => {
      params.OId = partID.value;
      params.Version = partVersion.value;
    },
    fetchSetting: {
      // 接口返回的表单数据字段名称
      listField: 'listPart',
    },
    columns: getPartAssColumns(),
    bordered: true,
    showIndexColumn: false,
    showTableSetting: true, // 显示表格设置工具
    tableSetting: { fullScreen: true }, // 表格设置工具配置
    canResize: false,
  });

  // 文档关联
  const [registerTable2] = useTable({
    api: GetDocTypeUseList,
    beforeFetch: (params) => {
      params.OId = partID.value;
      params.Version = partVersion.value;
    },
    fetchSetting: {
      // 接口返回的表单数据字段名称
      listField: 'listDoc',
    },
    columns: getDocAssColumns(),
    bordered: true,
    showIndexColumn: false,
    showTableSetting: true, // 显示表格设置工具
    tableSetting: { fullScreen: true }, // 表格设置工具配置
    canResize: false,
  });
</script>
